<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<body>
    <div id="app">
        <com v-on:sayhello="sayHello" @saybye="sayBye"></com>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                name:'小明',
                age:28,
            },
            methods:{
                sayHello(){
                    console.log('vm中的sayHello');
                },
                sayBye(name,age){
                    console.log('vm中的sayBye'+":" + name + age);
                }
            },
            components:{
                    com:{
                        template:`<div>
        <input type="button" value="组件中的Hello" @click="Hello">
        <input type="button" value="组件中的Bye" @click="Bye">
                         </div>`,
                      
                         methods:{
                             Hello(){
                                //  console.log('组件中的Hello');
                                 this.$emit('sayhello');
                             },
                             Bye(){
                                // console.log('组件中的Bye');
                                this.$emit('saybye','小刚',18)
                             }
                         }
                    }
            }
        })
    </script>
</body>
</html>